<template>
	<view class="footprint">
		<!--日历控件-->
		<rf-calendar
				class="date"
				:insert="true"
				:lunar="true"
				:start-date="'2019-3-2'"
				:end-date="'2019-5-20'"
				@change="handleDateChange"
		/>
		<!--足迹列表-->
    <rf-swipe-action class="rf-list" v-if="footPrintList.length > 0">
      <rf-swipe-action-item
          :options="options"
          :info="item"
          @action="bindClick"
          :key="index"
          class="rf-swipe-item"
          v-for="(item, index) in footPrintList">
          <view class="rf-list-item" @tap="navTo(`/pages/product/product?id=${item.product.id}`)">
          <view class="left">
            <image class="image" :src="item.product && item.product.picture"></image>
          </view>
          <view class="mid">
            <view class="title in2line">{{ item.product && item.product.name }}</view>
            <view class="data">
              <view class="item"><text class="iconfont icontuandui"></text>推荐 {{item.product && item.product.collect_num || 0 }}</view>
              <view class="item"><text class="iconfont iconkechakan"></text>浏览 {{item.product && item.product.view || 0 }}</view>
            </view>
            <view class="state-wrapper">
              <text class="state" v-if="parseInt(item.product && item.product.product_status) === 0">
                失效
              </text>
            </view>
            <view class="bottom">
              <text class="price">{{ item.product && item.product.minPriceSku.price }}</text>
              <text>{{ item.created_at | time }}</text>
            </view>
          </view>
        </view>
      </rf-swipe-action-item>
      <rf-load-more :status="loadingType" v-if="footPrintList.length > 0"/>
    </rf-swipe-action>
		<!--足迹列表为0-->
		<rf-empty info="暂无足迹列表" v-if="footPrintList.length === 0"></rf-empty>
		<!--加载动画-->
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>

<script>
    /**
     * @des 我的足迹
     *
     * @author stav stavyan@qq.com
     * @date 2019-11-22 10:47
     * @copyright 2019
     */
    import {footPrintDel, footPrintList} from "@/api/userInfo";
    import rfLoadMore from '@/components/rf-load-more/rf-load-more';
    import rfCalendar from "@/components/rf-calendar/rf-calendar";
    import rfSwipeAction from '@/components/rf-swipe-action/rf-swipe-action';
    import rfSwipeActionItem from '@/components/rf-swipe-action-item/rf-swipe-action-item';
    import moment from '@/common/moment';

    export default {
        components: {
            rfLoadMore,
            rfCalendar,
            rfSwipeAction,
            rfSwipeActionItem
        },
        data() {
            return {
                footPrintList: [],
                page: 1,
                loadingType: 'more',
                token: null,
                startTime: moment().startOf('day').format('X'),
                endTime: moment().endOf('day').format('X'),
                options: [
                    {text: '删除', style: {backgroundColor: '#fa436a'}}
                ],
                loading: true,
                empty: ''
            };
        },
        filters: {
            // 时间格式化
            time(val) {
                return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
            }
        },
				//加载更多
				onReachBottom() {
					this.page++;
					this.getFootPrintList();
				},
        onLoad() {
            this.initData();
        },
        methods: {
            // 监听日期变化
            async handleDateChange(e) {
                this.page = 1;
                this.footPrintList = [];
                if (parseInt(e.type) !== 0) {
                    this.startTime = await moment(`${e.year}-${e.month}-${e.date} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                    this.endTime = await moment(`${e.year}-${e.month}-${e.date + 1} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').valueOf() / 1000;
                } else {
                    this.startTime = undefined;
                    this.startTime = undefined;
                }
                this.loading = true;
                this.getFootPrintList();
            },
            // 删除足迹
            async bindClick(e) {
                await this.$http.delete(`${footPrintDel}?id=${e.data.id}`, {
                    page: this.page
                }).then(() => {
                    this.$mHelper.toast('删除足迹成功');
                    this.page = 1;
                    this.footPrintList.length = 0;
                    this.getFootPrintList();
                });
            },
            // 数据初始化
            initData() {
              this.getFootPrintList();
            },
            // 获取我的足迹列表
            async getFootPrintList() {
                const params = {};
                params.page = this.page;
                // 起始时间和结束时间
                if (this.startTime && this.endTime) {
                    params.start_time = this.startTime,
                    params.end_time = this.endTime
                }
                await this.$http.get(`${footPrintList}`, {
                    ...params
                }).then(r => {
                    this.loading = false;
                    this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
                    this.footPrintList = [...this.footPrintList, ...r.data];
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 跳转至商品详情
            navTo(route) {
							this.$mRouter.push({route})
            }
        }
    }
</script>

<style lang='scss' scoped>
	page {
		background: $page-color-base;
	}
	.footprint {
    .rf-swipe-item {
      margin: 0 $spacing-sm $spacing-base;
    }
    .rf-list-item {
      padding: 0;
      margin: 0;
    }
    .left {
      padding: 20upx 20upx 10upx;
      .image {
        width: 260upx;
        height: 240upx;
      }
    }
    .mid {
      width: calc(100vw - 350upx);
      margin: 0 10upx;
      .title {
        height: 88upx;
        font-size: $font-base + 2upx;
        color: $font-color-dark;
      }
      .data {
        display: flex;
        justify-content: space-between;
        margin: 10upx 0 5upx;
        font-size: $font-base;
        color: $font-color-base;
        .item {
          height: 50upx;
          line-height: 50upx;
        }
        .iconfont {
          color: $font-color-light;
          margin-right: 10upx;
        }
      }
      .state-wrapper {
        height: 48upx;
        .state {
          margin: 5upx 0;
          background-color: $base-color;
          opacity: 0.8;
          color: $color-white;
          font-size: $font-sm;
          padding: 4upx 10upx;
          border-radius: 6upx;
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $font-sm;
        color: $font-color-light;
        .price{
          color: $base-color;
          font-size: $font-lg;
          &:before{
            content: '￥';
            font-size: $font-sm;
          }
        }
      }
    }
	}
</style>
